﻿<#include "include/_meta.html">
<title>客户管理列表</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 客户中心 <span
            class="c-gray en">&gt;</span> 客户管理 <a class="btn btn-success radius r"
                                                  style="line-height:1.6em;margin-top:3px"
                                                  href="javascript:location.replace(location.href);" title="刷新"><i
                class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="page-container">

    <div class="text-c">
        客户名字:
        <input type="text" class="input-text" style="width:250px" placeholder="输入客户名字 " id="custormerName"/>
        手机号:
        <input type="text" class="input-text" style="width:250px" placeholder="输入手机号 " id="custormerPhone"/>

        <button type="submit" class="btn btn-success" id="searchCustomerInformation">
            <i class="Hui-iconfont">&#xe665;</i> 搜客户
        </button>

    </div>

    <div class="cl pd-5 bg-1 bk-gray mt-20"> <span class="l">
			<a href="javascript:;" id="addCustomerInformation" class="btn btn-primary radius"><i class="Hui-iconfont">&#xe600;</i> 添加客户</a></span>
    </div>

    <table id="CustomerInfListTable" class="table table-border table-bordered table-bg table-hover">
        <thead>
        <tr>
            <th scope="col" colspan="9">客户信息列表</th>
        </tr>
        <tr class="text-c">
            <th width="40"><input type="checkbox" name="useritem" value=""></th>
            <th width="50" hidden="hidden">客户ID</th>
            <th width="80">客户名称</th>
            <th width="100">手机号</th>
            <th width="150">身份证</th>
            <th width="80">客户状态</th>
            <th width="80">信用值</th>
            <th width="100">会员等级</th>
            <th width="80">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr class="text-c" v-for="(item,index) in result">
            <th width="40"><input type="checkbox" name="useritem" value=""></th>
            <td hidden="hidden">{{item.custormerId}}</td>
            <td>{{item.custormerName}}</td>
            <td>{{item.custormerPhone}}</td>
            <td>{{item.custormerIdCard}}</td>
            <td>{{item.custormerState==0?'正常':'黑名单'}}</td>
            <td>{{item.custormerCreditValue}}</td>
            <td>
                <span v-if="item.custormerVipLevel==0">非会员</span>
                <span v-else-if="item.custormerVipLevel==1">白银</span>
                <span v-else-if="item.custormerVipLevel==2">黄金</span>
                <span v-else-if="item.custormerVipLevel==3">白金</span>
                <span v-else="item.custormerVipLevel==4">钻石</span>
            </td>
            <td>
                <a href="#" @click="editEvent(item.custormerId)">编辑</a>
                <a href="#" @click="delEvent(item.custormerId)">删除</a>
            </td>
        </tr>

        <tr>
            <td colspan="9">
                <div id="pagenav"></div>
            </td>
        </tr>
        </tbody>

    </table>
</div>
</table>

<#include "include/_footer.html">

<script>

    //查询所有得客户信息
    var app = new Vue({
        el: "#CustomerInfListTable",
        data: {
            result: []
        }
    });

    var getAllCustomerInf = function (curr) {
        $.ajax({
            type: 'post',
            dataType: 'json',
            url: '/getAllCustomerInf',
            data: {
                pageNum: curr || 1,
                pageSize: 5,
                custormerName: $("#custormerName").val(),
                custormerPhone: $("#custormerPhone").val()
            },
            success: function (msg) {
                app.result = msg.cuslist;
                laypage({
                    cont:"pagenav",
                    pages:msg.total,
                    skin:"#DB7010",
                    first:"第一页",
                    last:"最后一页",
                    curr:curr||1,
                    jump:function (obj,first) {
                        if (!first){
                            getAllCustomerInf(obj.curr);
                        }
                    }
                });
            }
        });
    };

    getAllCustomerInf();

    $("#searchCustomerInformation").click(function () {
        getAllCustomerInf();
    });


    //添加客户
    $("#addCustomerInformation").on("click", function () {
        layer.open({
            type: 2,
            title: '添加客户',
            fix: false,
            maxmin: true,
            shadeClose: true,
            area: ['800px', '550px'],
            content: '/clientAdd',
            end: function () {
                getAllCustomerInf();
            }
        });
    });

    //修改客户信息
    var editEvent = function (custormerId) {
        layer.open({
            type: 2,
            title: '修改客户信息',
            fix: false,
            maxmin: true,
            shadeClose: true,
            area: ['800px', '550px'],
            content: '/toUpdate?custormerId=' + custormerId,
            end: function () {
                getAllCustomerInf();
            }
        });
    };

    //删除用户
    var delEvent = function (custormerId) {
        //询问框
        layer.confirm("确认删除吗？",
            {btn: ['是', '否']},
            //是
            function () {
                $.ajax({
                    type: 'post',
                    dataType: 'json',
                    url: '/delCustomerInf',
                    data: {
                        custormerId: custormerId
                    },
                    success: function (result) {
                        if (result == '1')
                            layer.msg("已经成功删除记录" + custormerId, {icon: 1});
                        getAllCustomerInf();
                    }
                });
            },
            //否
            function () {
            }
        );
    };

</script>

</body>
</html>